<!-- 任务导向 -->
<template>
  <div class="tech-chart-container">
    <div id="taskOrientedChart" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    const myChart = echarts.init(document.getElementById('taskOrientedChart'));

    // 预定义的固定位置，确保不重叠
    const fixedPositions = [
      [2, 5], [8, 5], [5, 10], [3, 15], [7, 15],
      [1, 8], [9, 8], [4, 12], [6, 12], [5, 18]
    ];

    // 生成固定数据
    const generateData = () => {
      return fixedPositions.map((pos, index) => ({
        name: `任务${index + 1}`,
        value: [pos[0], pos[1], 100],
        number: index + 1
      }));
    };

    const data = generateData();

    // 科技感颜色配置
    const techColors = {
      primary: '#00F6FF',
      secondary: '#00A2FF',
      bgStart: 'rgba(6,33,41,0.8)',
      bgEnd: 'rgba(6,33,41,0.2)',
      border: '#00CEFF',
      glow: '#00F6FF',
      text: {
        primary: '#00F6FF',
        secondary: '#00A2FF',
        highlight: '#FFFFFF'
      }
    };

    // 气泡样式配置
    const getBubbleStyle = (index) => {
      const colors = [
        { start: 'rgba(0, 246, 255, 0.3)', end: 'rgba(0, 246, 255, 0.1)' },
        { start: 'rgba(0, 162, 255, 0.3)', end: 'rgba(0, 162, 255, 0.1)' },
        { start: 'rgba(0, 206, 255, 0.3)', end: 'rgba(0, 206, 255, 0.1)' }
      ];
      return {
        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
          offset: 0,
          color: colors[index % colors.length].start
        }, {
          offset: 1,
          color: colors[index % colors.length].end
        }]),
        shadowColor: techColors.glow,
        shadowBlur: 15,
        shadowOffsetY: 0
      };
    };

    // 动画配置
    const animationOptions = {
      animationDuration: 1500,
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return idx * 200;
      }
    };

    // 悬浮效果配置
    const emphasisOptions = {
      itemStyle: {
        shadowBlur: 25,
        shadowColor: techColors.glow,
        scale: 5
      },
      label: {
        color: techColors.text.highlight,
        fontWeight: 'bold',
        fontSize: 16,
        textShadow: '0 0 15px rgba(0, 246, 255, 1)'
      }
    };

    // 计算气泡大小
    const calculateBubbleSize = () => {
      const container = document.getElementById('taskOrientedChart');
      if (!container) {
        return 70; // 返回默认值
      }
      const containerWidth = container.offsetWidth;
      const containerHeight = container.offsetHeight;
      // 根据容器大小计算基础尺寸
      const baseSize = Math.min(containerWidth, containerHeight) * 0.06;
      // 限制最小和最大尺寸
      return Math.max(50, Math.min(90, baseSize));
    };

    // 计算字体大小
    const calculateFontSize = (bubbleSize) => {
      return Math.max(14, Math.min(18, bubbleSize * 0.25));
    };

    const updateChart = () => {
      const bubbleSize = calculateBubbleSize();
      const fontSize = calculateFontSize(bubbleSize);

      const option = {
        backgroundColor: 'transparent',
        grid: {
          top: '10%',
          bottom: '10%',
          left: '10%',
          right: '10%'
        },
        xAxis: {
          show: false,
          min: 0,
          max: 10,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: techColors.text.primary,
            fontSize: 12
          },
          alignTicks: false
        },
        yAxis: {
          show: false,
          min: 0,
          max: 20,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: techColors.text.primary,
            fontSize: 12
          },
          alignTicks: false
        },
        series: [{
          type: 'scatter',
          symbolSize: bubbleSize,
          data: data.map((item, index) => ({
            ...item,
            itemStyle: getBubbleStyle(index)
          })),
          label: {
            show: true,
            position: 'inside',
            formatter: '{b}',
            color: techColors.text.primary,
            fontSize: fontSize,
            fontFamily: 'Arial, sans-serif',
            fontWeight: 'bold',
            textShadow: '0 0 10px rgba(0, 246, 255, 0.8)',
            rich: {
              value: {
                fontSize: fontSize * 1.2,
                color: techColors.text.highlight,
                textShadow: '0 0 15px rgba(255, 255, 255, 0.8)',
                padding: [0, 0, 5, 0]
              },
              label: {
                fontSize: fontSize * 0.8,
                color: techColors.text.secondary,
                textShadow: '0 0 8px rgba(0, 162, 255, 0.6)'
              }
            }
          },
          emphasis: {
            scale: 1.2,
            itemStyle: {
              shadowBlur: 25,
              shadowColor: techColors.glow
            },
            label: {
              color: techColors.text.highlight,
              fontWeight: 'bold',
              fontSize: 16,
              textShadow: '0 0 15px rgba(0, 246, 255, 1)'
            }
          },
          animationDuration: 1500,
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return idx * 200;
          }
        }],
        graphic: []
      };

      myChart.setOption(option);
    };

    // 初始化图表
    updateChart();

    // 监听窗口大小变化
    const handleResize = () => {
      myChart.resize();
      updateChart();
    };

    window.addEventListener('resize', handleResize);

    // 添加悬浮动画
    myChart.on('mouseover', (params) => {
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: params.dataIndex
      });
    });
    
    myChart.on('mouseout', (params) => {
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: params.dataIndex
      });
    });

    myChart.on('click', (params) => {
      const currentData = data.find(item => item.name === params.name);
      if (currentData) {
        if (this.$store) {
          this.$store.commit('updateMission', currentData.number);
        } else {
          console.error('this.$store 未定义，无法执行 updateMission'); 
        }
      }
      
      // 点击时添加波纹效果
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: params.dataIndex
      });
    });

    // 修改周期性动画
    setInterval(() => {
      const bubbleSize = calculateBubbleSize();
      myChart.setOption({
        series: [{
          symbolSize: bubbleSize,
          data: data.map((item, index) => ({
            ...item,
            itemStyle: {
              ...getBubbleStyle(index),
              shadowBlur: 15 + Math.random() * 10
            }
          }))
        }]
      });
    }, 3000);

    // 在组件销毁前移除事件监听
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', handleResize);
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', function() {
      myChart.resize();
    });
  }
};
</script>

<style scoped>
#taskOrientedChart {
  position: relative;
  z-index: 1;
}
.tech-chart-container{
  height: 100%;
}
</style>